<template>
  <div class="dingdanliebiao">
    <!-- 单条订单列表信息 -->
    <div class="dingdan" v-for="(item,index) in orderList" :key="item.order_id" >
      <div class="title">
        <p>订单编号:{{item.order_id}}</p>
        <p>订单时间:{{item.createdAt}}</p>
      </div>
      <div class="zhongjian" @click="dingdanxiangqing(item.id)">
        <div class="suolve">

          <div class="suolvea">
            <div class="tupian">
              <img :src="item.goods_info[0].s_goods_photos[0].path" alt="">
            </div>
            <p class="shangpin">{{item.goods_info[0].goods_name}}</p>
          </div>

        </div>

        <p class="num">{{num[index]}}件商品</p>
        <p class="price">￥{{item.total_price}}</p>
      </div>
      <div class="dibu">
        <p>{{dizhio[index]}}</p>
        <div class="anniu">
          <button @click="delOrder(item.id)">删除订单</button>
          <button>支付订单</button>
        </div>

      </div>
    </div>

    <!-- 分页器  page-sizes每页显示个数选择器的选项设置 page-size每页显示条目个数  current-page当前页数-->
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[1,5,10]"
      :page-size="5"
     
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
  </div>
 
</template>

<script>
//引入格式化时间的函数
import dayjs from "dayjs"
//引入获取订单列表请求函数,删除订单,获取地址信息
import { getOrders, deloneOrder, getaddress } from "@/assets/request.js"

export default {
  name: 'orderList',
  data() {
    return {
     
      //准备一个空数组装请求回来的地址列表信息
      orderList: [],

      //准备一个空数组接受请求回来的地址
      dizhi: [],

      //设置一个参数，分页用，显示几条
      limit:5,
       //设置一个参数，分页用，第几页
      page:1,

      //分页器组件的自带参数
      currentPage4: 4,

      //接收请求回来的订单列表里面的数据总量
      total:0,

    }
  },

  //方法
  methods: {

    //分页器自带的方法---每页显示多少条
    handleSizeChange(val) {
      // console.log(val);  //每页显示个数选择器选中之后返回的值 5

      //把每页显示多少条的值赋值给data的limit
      this.limit=val

      //调用请求订单列表函数,把data的一页显示几条和第几页的值传给函数,然后再重新请求列表，重新渲染
        this.getOredrlist(this.limit,this.page)
    },

      //分页器自带的方法---当前页
      handleCurrentChange(val) {
        // console.log(val);  //点击分页器第几页，拿到第几页的值
        this.page=val //把第几页的值传给data

        //把点击的第几页的值和每一页显示多少条数据的值--传给获取订单列表的函数，重新请求订单列表，根据新的订单列表重新渲染页面
        this.getOredrlist(this.limit,this.page)

      },

    //跳转订单详情页，携带订单id
    dingdanxiangqing(id){
      // console.log(id);
      this.$router.push({
        name:"orderpay",
        params:{
          id,
        }
      })
    },

    //获取订单列表方法封装---拿到分页器方法传过来的limit和page
    async getOredrlist(limit,page) {

      //请求订单列表---把收到的limit和page传给请求函数
      let bb = await getOrders({

        //项目id
        project_id: 267,

        //一页显示几条--没有值就为10条一页
        limit:limit||5,

        //第几页--没有值就为第1页
        page:page||1,
      })

      console.log(bb);  //查看请求状态是否成功

      //coutn的数值是代表订单列表里面有多少条数据,把值赋给data的参数
        this.total =bb.data.result.count

      //把请求回来的订单列表赋值给data里面的参数
      this.orderList = bb.data.result.rows

      //把页面的data数据里面的层级goods_info的字符串解析，变成正常对象，里面有图片信息
      this.orderList = this.orderList.map((item) => {
        //使用dayjs格式化需要格式化的时间
        item.createdAt = dayjs(item.createdAt).format("YYYY年MM月DD日 HH:mm:ss")
        //使用JSON.parse把数组里面的字符串转成正常数组
        item.goods_info = JSON.parse(item.goods_info)
        //返回 处理完的item出去
        return item
      })

      //打印当前页面的订单列表数组
      // console.log(this.orderList);

    },


    //删除订单
    async delOrder(id) {
      console.log(id);

      //给请求函数传入地址id
      await deloneOrder(id)

      //组件弹窗提醒
      this.$message({
        message: "该订单已删除",
        type: "warning",
        duration: 800,
      })

      //再次获取订单列表信息
      this.getOredrlist()

    }

  },

  //计算属性
  computed: {

    //显示每条订单之前选中的地址
    dizhio() {

      //准备一个空数组，接收地址拼接的字符串
      let dizhis = []
      //遍历订单列表
      this.orderList.forEach((item) => {
        //遍历请求回来的地址列表数组
        this.dizhi.forEach((e) => {
          //如果 每条订单的地址id 和 地址列表里的地址id 相等，就把地址列表的对应地区+对应地址+人名+手机号 的值赋值给准备的数组
          if (item.addr_id == e.id) {
            dizhis.push(e.area_name + e.desc + e.name + e.phone)
          }
        })


      })
      //返回 数组出去
      return dizhis

    },

    //订单里的商品总数量---每一个item里的每一个商品---数量相加
    num() {

      //声明一个数组
      let nums = []

      //遍历订单列表数组
      this.orderList.forEach((item, index) => {
        //准备一个变量相加使用
        let dd = 0

        //遍历订单里的商品数组信息，获取每一个商品对象的数量
        item.goods_info.forEach((e) => {
          dd += e.num
        })
        //把求和添加到数组里
        nums.push(dd)

      })

      //返回数组出去
      return nums
    }
  },

  //生命周期钩子
  async mounted() {

    //获取订单列表
    this.getOredrlist(1,2)

    //请求地址函数调用
    let gg = await getaddress()
    //把地址列表赋值给页面数组
    this.dizhi = gg.data.result

    // //请求订单列表--无图片
    // let bb = await getOrders({
    //   project_id: 267,
    // })

    // // console.log(bb);

    // //把请求回来的订单列表赋值给data里面的参数
    // this.orderList = bb.data.result.rows

    // //把页面的data数据里面的层级goods_info的字符串解析，变成正常对象，里面有图片信息
    // this.orderList = this.orderList.map((item) => {
    //   item.goods_info = JSON.parse(item.goods_info)
    //   return item
    // })

    // console.log(this.orderList);  此时数据里面的数组装着对象的字符解析完成

    //从本地缓存里拿取购物车信息---里面有图片
    // let orderList = sessionStorage.getItem("orderList")
    // let cc = JSON.parse(orderList)
    // console.log(cc);

  }
}

</script>

<style lang='scss' scoped>

.dingdanliebiao{
  background-color: gainsboro;

.dingdan {
  width: 1400px;
  height: 300px;
  background-color: gainsboro;
  margin-left: 56px;
  border-radius: 10px;
  margin-bottom: 50px;
  color: grey;
  border-bottom: 2px solid gray;
 

  &:hover{
    box-shadow: 10px 13px 20px 10px white;
    
  }

  .title {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid white;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    line-height: 40px;

    p {
      padding: 0px 20px;
    }
  }

  .zhongjian {
    width: 100%;
    height: 200px;
    background-color: gainsboro;
    display: flex;
    justify-content: space-around;
    color: black;
    cursor: pointer;
  

    .suolve {
      display: flex;

      .suolvea{
        position: relative;

        p{
          position: absolute;
          left: 180px;
          top: 80px;
        }

      }
    }

    .tupian {
      margin-top: 20px;
      width: 150px;
      height: 150px;
      background-color: white;

      img {
        width: 100%;
      }
    }

    p {
      height: 50px;
      // background-color: yellow;
      font-size: 16px;
    }

    .num,
    .price {
      margin-top: 80px;
    }

    .shangpin {
      width: 200px;
      position: absolute;
      left: 355px;
      top: 50px;
    }
  }

  .dibu {
    width: 100%;
    height: 40px;
    border-top: 1px solid white;
    // border: 1px solid black;
    display: flex;
    justify-content: space-between;

    p {
      // background-color: yellow;
      line-height: 40px;
      margin-left: 16px;
      margin-top: 10px;
      font-size: 16px;
      width: 500px;
    }

    .anniu {
      margin-top: 10px;
      width: 200px;

      button {
        width: 80px;
        height: 40px;
        background-color: #333333;
        color: white;
        border: none;
        margin-right: 20px;
        border-radius: 10px;
        cursor: pointer;
        z-index: 100;

      }
    }
  }
}

.block{
  margin-left: 400px;
  background-color: transparent;
}

}
</style>
